<template>
  <div class="member-card-content" style="padding-top: 0.266667rem">
    <div class="card-content">


      <div v-if="showList">
        <div class="card-info-item" style="height: 1.2rem" v-for="item in list">
          <div class="left">
            <p class="card-text">{{item.chnl_goods_name}}</p>
            <p class="last-used-time" style="font-size: 0.267rem;margin-top: .133rem">{{item.start_time}}-{{item.end_time}}</p>
          </div>

          <div class="right">
            <p class="total">¥{{item.chnl_current_price/100}}</p>
          </div>
          <div class="clear"></div>
        </div>
      </div>

      <div class="weui-msg" style="display: block;" v-else>
        <div class="weui-msg__icon-area"><i class="weui-icon-warn weui-icon_msg" style="color: #0eadfe;"></i></div>
        <div class="weui-msg__text-area">
          <h2 class="weui-msg__title">提示</h2>
          <p class="weui-msg__desc">暂无优惠券</p>
        </div>
        <div class="weui-msg__opr-area">
          <p class="weui-btn-area">
            <a href="javascript:history.back();" class="weui-btn weui-btn_default"
               style="background-color: #fff;color: #ff6600;width: 9.253rem;text-align: center;font-size: .427rem;">返回</a>
          </p>
        </div>
      </div>


      <div class="clear"></div>
    </div>

    <loading :show="showLoading" :text="showLoadingText"></loading>
    <toast v-model="showToast" width="5rem" :type="toastType" :time="800" :text="toastText"></toast>


  </div>
</template>

<script>
  import { Loading, Toast } from 'vux'

  import {utils} from './../common/utils/utils'
  import {oauth} from './../common/utils/oauth'
  const common = require('./../common/utils/common')

  export default {
    components: {
      Loading,
      Toast,
    },
    name: 'hello',
    data() {
      return {
        mchCodeByUrl: common.getUrlParam('mchCode'),
        openidByUrl: common.getUrlParam('openid'),
        cacheMchCode: localStorage.getItem('mchCode'),
        cacheMchType: localStorage.getItem('type'),
        openid: localStorage.getItem('openid'),

        msg: 'Welcome to Your Vue.js App',
        show: 1,
        alertText: '改手机号已注册，请直接绑定会员',
        alertBtnText: '绑定会员',

        showMask: false,
        showLoading: false,
        showLoadingText: '',
        showToast: false,
        toastType: 'cancel',
        toastText: '',

        showList: true,
        list: []
      }
    },
    beforeCreate() {
      document.title = '优惠券'
    },
    async created() {
      const _this = this
      this.showLoading = true

      //授权
      oauth.checkOauth(utils, _this)

      const result = await utils.couponList(this.openid, this.cacheMchCode, _this)
      console.log(result)
      if(result.code === 200) {
        this.showLoading = false
        console.log(result.values.list.length)
        if(result.values.list.length !== 0) {
          this.list = result.values.list
          this.showList = true
        } else {
          this.showList = false
        }
      }

    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .clear {
    clear: both;
  }

  .weui-btn:after {
    border-color: #ff6600;
  }

  .member-card-content {
    background-color: #F2F2F2;
    min-height: 17.787rem;
  }

  .member-card-content .card-content .title {
    padding: 0 0.4rem 0 0.4rem;
  }

  .member-card-content .card-content .title p {
    line-height: 0.933rem;
    font-size: 0.427rem;
  }

  .member-card-content .card-content .card-info-item {
    margin-bottom: 0.267rem;
    padding: 0.267rem 0.4rem 0.267rem 0.4rem;
    background-color: #fff;
    border-top: 0.027rem solid #ddd;
    border-bottom: 0.027rem solid #ddd;
  }

  .member-card-content .card-content .card-info-item .left {
    float: left;
  }

  .member-card-content .card-content .card-info-item .left .card-text {
    font-size: 0.48rem;
    line-height: 0.667rem;
  }

  .member-card-content .card-content .card-info-item .right {
    float: right;
    font-size: 0.427rem;
    text-align: right;
    margin-left: 0.667rem;
  }

  .member-card-content .card-content .card-info-item .right .total {
    line-height: 1.333rem;
    text-align: right;
    color: #006600;
    font-size: 0.48rem;
  }
</style>
